<%@page contentType="text/html;charset=UTF-8"%>
<%@page pageEncoding="UTF-8"%>
<%@ page session="false"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@	taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="elf" uri="/WEB-INF/tld/elfunc.tld"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>view</title>
<style type="text/css">
.div_m {
	margin-left: 5px;
	margin-top: 10px;
	margin-bottom: 30px;
	margin-right: 5px;
	text-align: center;
}

.t_main {
	border: 1px solid #888888;
	border-collapse: collapse;
	width: 100%;
}

.t_main  th {
	font-size: 11pt;
}

.t_main td {
	border: 1px solid #000000;
	font-size: 10pt;
}

.t_main td input {
	width: 45px;
	height: 16px;
	text-align: center;
}

.td_info {
	font-size: 9pt;
}

.td_base {
	border: 2px solid #8855ff;
}

.tm {
	background-color: #e0f0e0
}
.tt td{
	font-weight: bold;
}
#bg {
	display: none;
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	background-color: black;
	z-index: 1001;
	-moz-opacity: 0.7;
	opacity: .70;
	filter: alpha(opacity = 70);
}

#show {
	display: none;
	position: absolute;
	top: 25%;
	left: 22%;
	width: 53%;
	height: 38%;
	padding: 8px;
	border: 1px solid #E8E9F7;
	background-color: white;
	z-index: 1002;
	overflow: auto;
}
</style>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/javascript/jquery-1.7.1.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/javascript/chen.js"></script>	
<script type="text/javascript">
$(function(){
	setInterval(setid, 1000); 
});

function setid(){
	$("#aid").val(setDate());
}
    function showdiv() {            
             //document.getElementById("bg").style.display = "block";
             //document.getElementById("show").style.display = "block";
             $("#bg").show();
             $("#show").show();
         }
    function hidediv() {
             $("#bg").hide();
             $("#show").hide();
         }
	function add() {
		$.ajax({
			type : "GET",
			url : "${pageContext.request.contextPath}/save",
			contentType : 'application/json',
			processDate : true,
			dataType : 'json',
			data : {
				id : $("#aid").val(),
				job_no2:$("#ajn").val(),
				name:$("#aname").val(),
				position:$("#ap").val(),
				bclass:$("#ac").val(),
				pf : $("#apf").val(),
				nh : $("#anh").val(),
				oh : $("#aoh").val(),
				sh : $("#ash").val(),
				hh : $("#ahh").val(),
				bonus : $("#abo").val(),
				nssa : $("#anssa").val(),
				nec : $("#anec").val()
			},
			success : function(msg) {
				//alert(msg.success);
				location.reload();
			}
		});
	}
	function save(id) {
		$.ajax({
			type : "GET",
			url : "${pageContext.request.contextPath}/save",
			contentType : 'application/json',
			processDate : true,
			dataType : 'json',
			data : {
				id : id,
				job_no2:$("#"+id+"_9").val(),
				name:$("#"+id+"_10").val(),
				position:$("#"+id+"_11").val(),
				bclass:$("#"+id+"_12").val(),
				pf : $("#" + id + "_1").val(),
				nh : $("#" + id + "_2").val(),
				oh : $("#" + id + "_3").val(),
				sh : $("#" + id + "_4").val(),
				hh : $("#" + id + "_5").val(),
				bonus : $("#" + id + "_6").val(),
				nssa : $("#" + id + "_7").val(),
				nec : $("#" + id + "_8").val()
			},
			success : function(msg) {
				//alert(msg.success);
				location.reload();
			}
		});
	}
	function del(id){
			$.ajax({
			type : "GET",
			url : "${pageContext.request.contextPath}/delete",
			contentType : 'application/json',
			processDate : true,
			dataType : 'json',
			data : {
				id : id,
			},
			success : function(msg) {
				//alert(msg.success);
				location.reload();
			}
		});
	}
	function editorsave(id, o) {

		if (o == 'e') {
			$("#" + id + "_e").hide();
			$("#" + id + "_s").show();
			for(var i=10;i<=12;i++){
				$("#" + id + "_" + i).show();
				$("#" + id + "_" + i+"_s").hide();
			}
			setreadonly(id, false);
		}
		if (o == 's') {
			$("#" + id + "_e").show();
			$("#" + id + "_s").hide();
			setreadonly(id, true);
			save(id);
		}
	}
	function setreadonly(id, v) {
		//alert($("#"+id+"_1").val());
		//alert($("#"+id+"_h2").text());
		if (v == true) {
			for ( var i = 1; i <= 12; i++) {
				$("#" + id + "_" + i).attr("readonly", true);
			}
		}
		if (v == false) {
			for ( var i = 1; i <= 12; i++) {
				$("#" + id + "_" + i).attr("readonly", false);
			}
		}
	}
	function go(){
	var np=$("#nP").val();
	var v=$("#job_No").val();
	window.open("querydetail?nP="+np+"&job_No="+v);
	}
	
	function getexcel(){
	var np=$("#nP").val();
	var v=$("#job_No").val();
	$.ajax({
			type : "GET",
			url : "${pageContext.request.contextPath}/toexcel",
			contentType : 'application/json',
			processDate : true,
			dataType : 'json',
			data : {
				id : np,
				v :v
			},
			success : function(msg) {
				alert(msg.success);
				location.reload();
			}
		});
	}	
</script>
</head>
<body>
<div class="div_m">

	<form:form modelAttribute="base"
	action="queryByNo" method="get">
	<fieldset><legend>search</legend> 
	<div style="float:left">
	<a href="javascript:void(0)" onclick="showdiv();">Add</a>
	<span>&nbsp;&nbsp;&nbsp;</span>
	<a href="javascript:void(0)" onclick="go();">Go</a>
	<span>&nbsp;&nbsp;&nbsp;</span>
	<a href="javascript:void(0)" onclick="getexcel();">GetExcel</a>
</div>	
	<form:label path="job_No">Condition</form:label>
	<form:select path="nP">
		<form:option value="1">ID</form:option>
		<form:option value="4">Job_No</form:option>
		<form:option value="2">Name</form:option>
		<form:option value="3">Class</form:option>
		<form:options />
	</form:select> <form:input path="job_No" /> <form:errors path="job_No" /> <input
		type="submit" value="submit" /></fieldset>
</form:form></div>




<div id="bg"></div>
<div id="show">
<table class="t_main t" style="height:80%;margin-top:16px;">

	<tr>
		<td>ID</td>
		<td><input style="width:95%;text-align: left" id="aid" type="text" value=""/></td>
		<td>Job_No</td>
		<td><input style="width:95%;text-align: left" id="ajn" type="text" value=""/></td>
		<td>Name</td>
		<td><input style="width:95%;text-align: left" id="aname" type="text" value=""/></td>
	</tr>
	<tr>
		<td>Posistion</td>
		<td><input style="width:95%;text-align: left" id="ap" type="text" value=""/></td>
		<td>Class</td>
		<td><input style="width:95%;text-align: left" id="ac" type="text" value=""/></td>
		<td>PayFactor</td>
		<td><input style="width:95%;text-align: left" id="apf" type="text" value="0.00"/></td>
	</tr>
	<tr>
		<td>N/H</td>
		<td><input style="width:95%;text-align: left" id="anh" type="text" value="0.00"/></td>
		<td>O/H</td>
		<td><input style="width:95%;text-align: left" id="aoh" type="text" value="0.00"/></td>
		<td>S/H</td>
		<td><input style="width:95%;text-align: left" id="ash" type="text" value="0.00"/></td>
	</tr>
	<tr>
		<td>H/H</td>
		<td><input style="width:95%;text-align: left" id="ahh" type="text" value="0.00"/></td>
		<td>Bonus</td>
		<td><input style="width:95%;text-align: left" id="abo" type="text" value="0.00"/></td>
		<td>NSSA</td>
		<td><input style="width:95%;text-align: left" id="anssa" type="text" value="0.00"/></td>
	</tr>
	<tr>
		<td>NEC</td>
		<td><input style="width:95%;text-align: left" id="anec" type="text" value="0.00"/></td>
		<td></td>
		<td></td>
		<td></td>
		<td></td>
	</tr>

<tr>
<td colspan=6 style="text-align: center"><a href="javascript:void(0)" onclick="add()">Create</a></td>
</tr>
</table>
 
<a style="float:right" href="javascript:void(0)" onclick="hidediv();">Close</a>
</div>





<div class="div_m">
<fieldset><legend>result</legend>
<table class="t_main">
	<tr>
		<th ROWSPAN=2>ID</th>
		<th ROWSPAN=2>Job_No</th>
		<th ROWSPAN=2>Name</th>
		<th ROWSPAN=2>Position</th>
		<th ROWSPAN=2>Class</th>
		<th class="td_base" ROWSPAN=2>Factor</th>

		<th class="td_base" ROWSPAN=2>N/H</th>
		<th ROWSPAN=2>N/P</th>
		<th class="td_base" ROWSPAN=2>O/H</th>
		<th ROWSPAN=2>O/P</th>
		<th class="td_base" ROWSPAN=2>S/H</th>
		<th ROWSPAN=2>S/P</th>
		<th class="td_base" ROWSPAN=2>H/H</th>
		<th ROWSPAN=2>H/P</th>
		<th class="td_base" ROWSPAN=2>Bonus</th>

		<th ROWSPAN=2>Gross</th>


		<th COLSPAN=4>DEDUCTION</th>

		<th ROWSPAN=2>Total</th>
		<th ROWSPAN=2>NET</th>
		<th ROWSPAN=2>EDIT</th>
		<th ROWSPAN=2>DEL</th>
	</tr>
	<tr>
		<th class="td_base">NSSA</th>
		<th>PAYE</th>
		<th>AIDS</th>
		<th class="td_base">NEC</th>
	</tr>
	<c:forEach items="${bases}" var="bs" begin="0" end="${fn:length(bases)>1?fn:length(bases)-2:0}" varStatus="var">
	<c:if test="${fn:length(bases) > 1}">
		<tr class="${var.count%2==1?'ts':'tm'}">
			<td class="">${bs.job_No}</td>
			<td class="td_info"><input readonly id="${bs.job_No}_9" size=8 type="text"
				value="${bs.job_No2}" /></td>
			<td class=""><input style="display: none; width: 100px" readonly id="${bs.job_No}_10"
				size=20 type="text" value="${bs.name}" /><span id="${bs.job_No}_10_s">${bs.name}</span></td>
			<td class="td_info"><input style="display: none; width: 100px" readonly
				id="${bs.job_No}_11" size=16 type="text" value="${bs.postion}" /><span
				id="${bs.job_No}_11_s">${bs.postion}</span></td>
			<td class="td_info"><input style="display: none;" readonly id="${bs.job_No}_12" size=10
				type="text" value="${bs.bclass}" /><span id="${bs.job_No}_12_s">${bs.bclass}</span></td>

			<td class="td_info"><input readonly id="${bs.job_No}_1" type="text" size=8
				value="${bs.payFactor}" /></td>
			<td><input readonly id="${bs.job_No}_2" type="text" size=8 value="${bs.nH}" /></td>
			<td><fmt:formatNumber value="${bs.nP}" pattern="0.00" /></td>
			<td><input readonly id="${bs.job_No}_3" type="text" size=8 value="${bs.oH}" /></td>
			<td><fmt:formatNumber value="${bs.oP}" pattern="0.00" /></td>
			<td><input readonly id="${bs.job_No}_4" type="text" size=8 value="${bs.sH}" /></td>
			<td><fmt:formatNumber value="${bs.sP}" pattern="0.00" /></td>
			<td><input readonly id="${bs.job_No}_5" type="text" size=8 value="${bs.hH}" /></td>
			<td><fmt:formatNumber value="${bs.hP}" pattern="0.00" /></td>
			<td><input readonly id="${bs.job_No}_6" type="text" size=8 value="${bs.bonus}" /></td>
			<td><fmt:formatNumber value="${bs.gross}" pattern="0.000" /></td>
			<td><input readonly id="${bs.job_No}_7" type="text" size=8 value="${bs.nSSA}" /></td>
			<td><fmt:formatNumber value="${bs.paye}" pattern="0.000" /></td>
			<td><fmt:formatNumber value="${bs.aIDS}" pattern="0.000" /></td>
			<td><input readonly id="${bs.job_No}_8" type="text" size=8 value="${bs.nEC}" /></td>
			<td><fmt:formatNumber value="${bs.total}" pattern="0.00" /></td>
			<!-- -->
			<td><fmt:formatNumber value="${bs.net}" pattern="0.000" /></td>
			<!-- 取整 -->

			<td><a id="${bs.job_No}_e" href="javascript:void(0);"
				onclick='editorsave("${bs.job_No}","e")'>EDIT</a><a id="${bs.job_No}_s"
				style="display: none" href="javascript:void(0);" onclick='editorsave("${bs.job_No}","s")'>SAVE</a></td>

			<td><a href="javascript:void(0)" onclick='del("${bs.job_No}")'>DEL</a></td>
		<tr></c:if>
	</c:forEach>


	<!-- 统计列 -->
	<c:forEach items="${bases}" var="bs" begin="${fn:length(bases)-1}" end="${fn:length(bases)>0?fn:length(bases)-1:0}"
		varStatus="var">
		<tr class="tt">
			<td colspan="6">SUM</td>
			<!--
			<td class=""></td>
			<td class=""></td>
			<td class=""></td>
			<td class=""></td>
			<td class=""></td>
			-->
			<td>${bs.nH}</td>
			<td><fmt:formatNumber value="${bs.nP}" pattern="0.00" /></td>
			<td>${bs.oH}</td>
			<td><fmt:formatNumber value="${bs.oP}" pattern="0.00" /></td>
			<td>${bs.sH}</td>
			<td><fmt:formatNumber value="${bs.sP}" pattern="0.00" /></td>
			<td>${bs.hH}</td>
			<td><fmt:formatNumber value="${bs.hP}" pattern="0.00" /></td>
			<td>${bs.bonus}</td>
			<td><fmt:formatNumber value="${bs.gross}" pattern="0.000" /></td>
			<td>${bs.nSSA}</td>
			<td><fmt:formatNumber value="${bs.paye}" pattern="0.000" /></td>
			<td><fmt:formatNumber value="${bs.aIDS}" pattern="0.000" /></td>
			<td>${bs.nEC}</td>

			<td><fmt:formatNumber value="${bs.total}" pattern="0.00" /></td>
			<!-- -->
			<td><fmt:formatNumber value="${bs.net}" pattern="0.000" /></td>
			<!-- 取整 -->

			<td></td>

			<td></td>
			<tr>
	
	</c:forEach>
	<!--  -->
	</table></fieldset>
</div>
</body>
</html>